<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
</head>
<body>
    <figure>
        <div style="
        border-width: 10px 32px 33px 5px;
        border-style: solid dashed dotted ridge;
        width: 300px;
        height: 500px;
">
        </div>
    </figure>

<section>
    <p>倒三角形</p>
    <div style="
    border-width: 300px;
    border-style: solid;
    border-color: black transparent transparent transparent;
">

    </div>
</section>
    <section style="position: relative">
        <p style="position: absolute;top: 360px;left: 250px;color: yellow;z-index: 3">正三角形</p>
        <div style="
        position: absolute;
        top: 0px;
    border-width: 300px;
    border-style: solid;
    border-color: transparent transparent currentColor transparent;
">

        </div>
    </section>

<section>
    圆角
    <div style="border:2px solid;
    border-radius: 100px/40px 0px 0px 0px;
    border-width: 8px 323px 20px 8px;
    width: 100px;
    height: 30px;
    outline: 3px dashed;
">

    </div>
</section>

<section>
    <p>
        半圆
    </p>
    <div class="half-circle">

    </div>

</section>

    <section>
        <div
        style="
        width: 5em;
        height: 5em;
        border-color: #28c6f6;
        border-width: 3em 2em 0px 2em;
        border-style: solid;
        border-radius: 50% 50% 0 0;
">

        </div>
    </section>
    <style>
        .half-circle{
            outline: dashed 1px black;
            width: 0px;
            height: 0px;
            border-width: 5em;
            border-style: solid;
            border-color: #b6fab6 black transparent transparent;
            border-radius: 50%;
        }
    </style>
</body>
</html>